<template>
    <div>
        <ul class="listSinger">
            <router-link tag="li" :to="'singerDetails?singer='+item.ting_uid" v-for="(item,index) in singerList" :key="index"><img :src="item.avatar_middle" alt=""><p>{{item.name}}</p></router-link>
        </ul>
    </div>
</template>

<script>
    import {getsingerDetail} from "../api/InterFacelibrary";
    export default {
        name: "Singer.vue",
        data() {
            return {
                singerListId: [
                    "2517", "7994", "1091", "45561", "2507", "245815", "1077", "1204", "1117", "82366"
                ],
                singerList: []
            }
        },
        created: function () {

            for (let item of this.singerListId) {

                getsingerDetail(item).then(res => {
                    console.log(res)
                    this.singerList.push(res);
                    // console.log(this.singerList)
                });
            }
        }
    }
</script>

<style scoped lang="less">
.listSinger {
    li {
        display: flex;
        height: 100px;
        margin: 10px;
        padding: 10px;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
       img {
           border-radius: 50%;
           width: 80px;
           height: 80px;
       }
        p {

            margin-left: 20px;
        }
    }
}
</style>